<template>
	<nut-tabs
		v-model="activeTab"
		color="#ffe243"
		background="#fff"
		size="large"
		class="mb-2"
	>
		<nut-tab-pane
			title="蛇毒皂配方"
			pane-key="computedResult"
			style="padding: 0; background-color: transparent"
		>
		</nut-tab-pane>
		<nut-tab-pane
			title="成皂信息"
			pane-key="soapInfo"
			style="padding: 0; background-color: transparent"
		>
		</nut-tab-pane>
		<nut-tab-pane
			title="其他记录"
			pane-key="otherRecord"
			style="padding: 0; background-color: transparent"
		>
		</nut-tab-pane>
	</nut-tabs>
	<!-- 配方信息 -->
	<view
		v-if="activeTab == 'computedResult'"
		class="easy_center_y text-sm mb-[120rpx]"
	>
		<view class="bg-[#fff] w-[96%] rounded-md pr-4 ml-[10rpx]">
			<!-- 油 -->
			<view class="easy_start">
				<image class="w-[30vw] h-[30vw]" src="../../assets/oil.svg" />
				<view class="w-[70%]">
					<view
						v-for="(item, index) in initData.oilLists"
						:key="index"
					>
						<view class="easy_between">
							<text class="mb-1 ellipsis w-[30%]">{{
								item.name
							}}</text>
							<text class="mr-6 mb-1">{{ item.weight }}g</text
							><text class="mr-6"
								>{{ item.proportion }}%</text
							></view
						>
					</view></view
				>
			</view>
		</view>
		<view class="easy_between w-[96%] mt-2">
			<!-- 水 -->
			<view class="bg-[#fff] flex-1 mr-2 rounded-md pr-4">
				<view class="easy_start">
					<view class="w-[30vw] h-[30vw] relative">
						<image
							class="w-[30vw] h-[30vw]"
							src="../../assets/water.svg"
						/>
						<view
							class="text-[#fff] text-sm absolute top-3 left-0 bottom-0 right-2 flex items-center justify-center"
							>水</view
						>
					</view>
					<text class="text-sm">{{ initData.waterWeight }}g</text>
				</view>
			</view>
			<!-- 碱 -->
			<view class="bg-[#fff] flex-1 rounded-md pr-4">
				<view class="easy_start"
					><view class="w-[30vw] h-[30vw] relative">
						<image
							class="w-[30vw] h-[30vw]"
							src="../../assets/NaOH.svg"
						/>
						<view
							class="text-[#fff] text-sm absolute top-8 left-3 bottom-0 right-2 flex items-center justify-center"
							>碱</view
						>
					</view>
					<text class="text-sm"
						>{{ initData.NaOHWeight }}g</text
					></view
				>
			</view>
		</view>
		<!-- 其他添加物 -->
		<view
			class="bg-[#fff] w-[96%] mt-2 rounded-md pr-4 pt-3 pb-3"
			v-if="initData.otherLists?.length > 0"
			><view class="easy_start">
				<image
					class="w-[28vw] h-[28vw]"
					src="../../assets/essentialOil.svg"
				/>
				<view class="w-[48%]">
					<view
						v-for="(item, index) in initData.otherLists"
						:key="index"
					>
						<view class="easy_between">
							<text class="mr-6 mb-1">{{ item.name }}</text>
							<text class="mr-6">{{ item.weight }}g</text></view
						>
					</view></view
				>
			</view></view
		>
		<!-- 计算结果 -->
		<view class="bg-[#fff] w-[96%] rounded-md mt-2 p-4">
			<view class="table">
				<!-- 表头(即第一行) -->
				<view class="tr">
					<view class="th">名称</view>
					<view class="th">重量(g)</view>
				</view>
				<!-- 表格第二行 -->
				<view v-for="(v, index) in computedData" :key="index">
					<view class="tr">
						<view class="td">{{ v.name }}</view>
						<view class="td">{{ v.weight }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 备注 -->
		<view
			v-if="initData.remark"
			class="bg-[#fff] w-[96%] rounded-md mt-2 p-4"
		>
			<view class="remark">备注</view>
			<view class="w-full pt-2 pl-2 pr-2">{{ initData.remark }}</view>
		</view>
	</view>
	<!-- 成皂信息 -->
	<view v-if="activeTab == 'soapInfo'">
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">成皂总重(g)</view>
			<nut-input
				v-model="formData.soapWeight"
				type="digit"
				placeholder="请输入数字"
				input-align="center"
				:border="false"
				@blur="formatNumber('soapWeight')"
			/>
		</view>
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">脱模PH</view>
			<nut-input
				v-model="formData.strippingPH"
				type="digit"
				placeholder="请输入数字"
				input-align="center"
				:border="false"
				@blur="formatNumber('strippingPH')"
			/>
		</view>
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">成熟PH</view>
			<nut-input
				v-model="formData.maturePH"
				type="digit"
				placeholder="请输入数字"
				input-align="center"
				:border="false"
				@blur="formatNumber('maturePH')"
			/>
		</view>
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">制皂模具</view>
			<nut-input
				max-length="20"
				v-model="formData.soapMold"
				placeholder="制皂模具"
				input-align="center"
				:border="false"
			/>
		</view>
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">制皂日期</view>
			<nut-input
				max-length="20"
				v-model="formData.createDate"
				placeholder="制皂日期"
				input-align="center"
				:border="false"
			/>
		</view>
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">脱模日期</view>
			<nut-input
				max-length="20"
				v-model="formData.strippingDate"
				placeholder="脱模日期"
				input-align="center"
				:border="false"
			/>
		</view>
		<view
			class="w-full h-[12vw] easy_between pl-4 pr-4"
			style="background-color: #fff"
		>
			<view style="width: 50vw">成熟日期</view>
			<nut-input
				max-length="20"
				v-model="formData.matureDate"
				placeholder="成熟日期"
				input-align="center"
				:border="false"
			/>
		</view>
	</view>

	<!-- 其他记录 -->
	<view v-if="activeTab == 'otherRecord'" style="margin-bottom: 60rpx">
		<view>
			<nut-textarea
				style="height: 80vh"
				v-model="formData.remark"
				max-length="2000"
				limit-show
				placeholder="补充信息在这里录入喔~"
		/></view>
	</view>

	<!-- 底部按钮1 -->
	<view
		v-if="activeTab == 'computedResult'"
		style="
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 3vw 4vw;
			z-index: 999;
		"
	>
		<view class="w-[49%]">
			<view class="easy_start w-full">
				<view class="easy_center_y mr-4" @tap="opeate('delete')">
					<image
						class="w-[5vw] h-[5vw]"
						src="../../assets/delete.svg"
					/>
					<view>删除</view>
				</view>
				<view class="easy_center_y mr-4" @tap="opeate('edit')">
					<image
						class="w-[5vw] h-[5vw]"
						src="../../assets/edit.svg"
					/>
					<view>编辑</view>
				</view>
				<view class="easy_center_y" @tap="opeate('like')">
					<image
						v-if="isCollect"
						class="w-[5vw] h-[5vw]"
						src="../../assets/likeRed.svg"
					/>
					<image
						v-else
						class="w-[5vw] h-[5vw]"
						src="../../assets/likeGray.svg"
					/>
					<view>收藏</view>
				</view></view
			>
		</view>
		<nut-button
			open-type="share"
			style="
				height: 100%;
				width: 49%;
				line-height: 100%;
				background-color: #6066ea;
				color: #fff;
				border-radius: 16rpx;
			"
			>分享给好友</nut-button
		>
	</view>
	<!-- 底部按钮2 -->
	<view
		v-if="activeTab != 'computedResult'"
		style="
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 3vw 4vw;
			z-index: 999;
		"
	>
		<view
			class="h-full w-[49%] easy_center bg-[#f7f8fa] mr-[2vw] rounded-md"
			@tap="goBack"
			>返回</view
		><view
			class="h-full w-[49%] easy_center bg-[#6066ea] text-[#fff] rounded-md"
			@tap="confirm"
			>修改并保存</view
		>
	</view>
</template>
<script setup lang="ts">
import { addRecipe } from '@/services/api';
import Taro, { eventCenter, getCurrentInstance, useLoad } from '@tarojs/taro';
import { ref, computed, reactive } from 'vue';

const initData = ref({ oilLists: [] });
const computedData = ref([] as any[]);
const visible = ref(false);
const visible1 = ref(false);

const activeTab = ref('computedResult');

const formData = reactive({
	soapWeight: '',
	strippingPH: '',
	maturePH: '',
	soapMold: '',
	createDate: '',
	strippingDate: '',
	matureDate: '',
	remark: '',
});

const isCollect = ref(false);
const opeate = (type) => {
	switch (type) {
		case 'delete':
			Taro.showModal({
				title: '提示',
				content: '确定要删除当前皂品吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
			break;
		case 'edit':
			break;
		case 'like':
			isCollect.value = !isCollect.value;
			break;
		default:
			break;
	}
};
const handleClose = () => {
	if (!formulaName.value) {
		Taro.showToast({
			title: '请输入皂皂名称',
			icon: 'none',
		});
		return false;
	} else {
		visible.value = false;
		// const { type, activeTab, NaOHPurity, ...rest } = initData.value;
		// // 报存配方
		// const data = {
		// 	formulaName: formulaName.value,
		// 	applyType: type,
		// 	calculationMethod: activeTab == 1 ? 'BY_WEIGHT' : 'BY_PERCENTAGE',
		// 	...rest,
		// 	oilDetail: null,
		// 	sodaPurity: NaOHPurity,
		// 	superFatAddition: null,
		// };
		// addRecipe(data).then((res) => {
		// 	console.log(res, 'res');
		// 	visible.value = false;
		// });

		visible1.value = true;
		return true;
	}
};
const formulaName = ref('');

useLoad(() => {
	const router = getCurrentInstance().router;
	if (router && router.params && router.params.obj) {
		initData.value = JSON.parse(decodeURIComponent(router.params.obj));
		console.log(initData.value, 'initData');
	}
	const {
		totalOilWeight,
		otherWeight,
		totalINS,
		substractNaOH,
		totalWeight,
		type,
	} = initData.value;
	console.log(totalWeight, 'totalWeight');

	computedData.value = [
		{ name: '油相总重', weight: totalOilWeight },
		{ name: '超脂/添加物', weight: otherWeight },
		{ name: '减碱', weight: substractNaOH + '%' },
		{ name: '入模总重', weight: totalWeight },
	];
	if (type == 'solid') {
		computedData.value.push({
			name: 'INS值(建议120~160)',
			weight: totalINS,
		});
	}
});
const goBack = () => {
	Taro.navigateBack();
};

const confirm = () => {
	formulaName.value = '';
	visible.value = true;
	// eventCenter.trigger('addOil', oilList);
	// Taro.navigateBack();
};

// 添加格式化数字的方法
const formatNumber = (field: string) => {
	if (formData[field]) {
		const num = parseFloat(formData[field]);
		if (!isNaN(num)) {
			formData[field] = num.toFixed(2);
		}
	}
};
</script>
<style>
.table {
	display: flex;
	flex-direction: column; /* 排列形式: 向下 */
}

.tr {
	display: flex;
	flex-direction: row;
}

.th,
.td {
	/* 公有的属性 */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* 自动换行 */
	width: 50%;
	text-align: center; /* 文本居中 */
	justify-content: center; /* 主轴居中 */
	align-items: center; /* 交叉轴居中 */
	border-top: 1px solid #dadada; /* 单元格上线框 */
	border-bottom: 1px solid #dadada; /* 单元格下线框 */
	border-left: 1px solid #dadada; /* 单元格左线框 */
	border-right: 1px solid #dadada; /* 单元格右线框 */
	height: 60px;
}

.th {
	font-weight: 800; /* 字体加重 */
	background-color: #a8abe5; /* 背景色 */
	height: 60px;
}

.td {
	background-color: #fff; /* 背景色 */
}
.remark {
	font-weight: 800;
	background-color: #a8abe5;
	height: 60px;
	line-height: 60px;
	width: 100%;
	padding-left: 30px;
}
</style>
